<template>
    <div>
        <div>
            <el-autocomplete
                    popper-class="my-autocomplete"
                    v-model="state"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect">
                <i
                        class="el-icon-edit el-input__icon"
                        slot="suffix"
                        @click="handleIconClick">
                </i>
                <template slot-scope="{ item }">
                    <div class="name">{{ item.value }}</div>
                    <span class="addr">{{ item.usernumber }}</span>
                </template>
            </el-autocomplete>
            <el-button type="primary"  icon="el-icon-search" @click="handleSearch"></el-button>

            <el-button style="float: right; " type="text"  class="el-icon-plus" @click= "newUser()" plain>新增用户</el-button>
        </div>
        <div>

            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="用户名称" label-width="150px">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                           <!-- <el-form-item label="用户密码" label-width="150px"> -->
                           <!--    <span>{{ props.row.password }}</span> -->
                           <!-- </el-form-item> -->
                            <el-form-item label="用户手机号" label-width="150px">
                                <span>{{ props.row.usernumber }}</span>
                            </el-form-item>
                            <el-form-item label="消费总金额" label-width="150px">
                                <span>￥{{ props.row.money }}</span>
                            </el-form-item>
                            <el-form-item label="喜爱类目" label-width="150px">
                                <span>{{ props.row.like }}</span>
                            </el-form-item>
                            <el-form-item label="最近下单日期" label-width="150px">
                                <span>{{ props.row.date }}</span>
                            </el-form-item>
                            <el-form-item label="默认收货人" label-width="150px">
                                <span>{{ props.row.reciever }}</span>
                            </el-form-item>
                            <el-form-item label="收货人手机号码" label-width="150px">
                                <span>{{ props.row.phonenumber }}</span>
                            </el-form-item>
                            <el-form-item label="默认收获地址" label-width="150px">
                                <span>{{ props.row.address }}</span>
                            </el-form-item>

                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="用户名"
                        prop="name">
                </el-table-column>
                <el-table-column
                        label="消费总金额"
                        prop="money">
                </el-table-column>
                <el-table-column
                        label="喜爱类别"
                        prop="like">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150px">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button icon="el-icon-delete" class="red" @click="handleDelete(scope.$index,scope.row)" type="text">删除</el-button>
                    </template>
                </el-table-column>
                <!-- 编辑用户信息 -->


            </el-table>
            <el-dialog title="新增用户" :visible.sync="newUserVisible" width="40%">
                <el-form ref="form_1" :model="form_1" label-width="100px" >
                    <el-form-item label="用户名" >
                        <el-input v-model="form_1.name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" >
                        <el-input v-model="form_1.password"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="手机号" > -->
<!--                        <el-input v-model="form_1.usernumber"></el-input> -->
<!--                    </el-form-item> -->
<!--                    <el-form-item label="喜好" >-->
<!--                        <el-input v-model="form.like"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="收货人" >-->
<!--                        <el-input v-model="form.reciever"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="收货手机号">-->
<!--                        <el-input v-model="form.phonenumber"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="收货地址">-->
<!--                        <el-input v-model="form.address"></el-input>-->
<!--                    </el-form-item>-->

                </el-form>

                <span slot="footer" class="dialog-footer">
                <el-button @click="newUserVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveUserEdit">确 定</el-button>
            </span>
            </el-dialog>

            <el-dialog title="编辑" :visible.sync="editVisible" width="40%">
                <el-form ref="form" :model="form" label-width="100px" >
                    <el-form-item label="用户名" >
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                     <el-form-item label="密码" >
                        <el-input v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" >
                        <el-input v-model="form.usernumber"></el-input>
                    </el-form-item>
                    <el-form-item label="收货人" >
                        <el-input v-model="form.reciever"></el-input>
                    </el-form-item>
                    <el-form-item label="收货手机号">
                        <el-input v-model="form.phonenumber"></el-input>
                    </el-form-item>
                    <el-form-item label="收货地址">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>

                </el-form>

                <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>

<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .red {
        color: #ff0000;
    }


</style>
<style>
    .my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

    .name {
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .addr {
        font-size: 12px;
        color: #b4b4b4;
    }

    .highlighted .addr {
        color: #ddd;
    }
    }
    }
</style>

<script>
    export default {
        data() {
            return {
                restaurants: [],
                state: '',
                tableData: [],
                editVisible:false,
                newUserVisible:false,
                form: {},
                form_1:{},
                idx: -1,
                id: -1
            }
        },
        created() {
            this.getData();
        },
        methods: {
            newUser(){
                this.newUserVisible= true;
            },
            saveUserEdit(){

                if(this.form_1.name==undefined||this.form_1.password==undefined){
                    this.$message.warning("不可为空");
                }
                else{
                        this.$axios
                            .post('/editUser', {
                                params: "newUser",
                                name:this.form_1.name,
                                password:this.form_1.password,


                            })
                            .then(successResponse => {
                                console.log(successResponse);
                                if(successResponse.data=="newSuccess"){
                                    this.newUserVisible = false;
                                    this.tableData .push({
                                        name:this.form_1.name,
                                        password:this.form_1.password,
                                        }
                                    );
                                    this.$message.success("新增用户成功");
                                    this.form_1={};
                                }

                            })
                    }


            },
            handleSearch() {
                if(this.state==""  ) {
                    this.$message.warning("输入为空");
                }
                else
                {
                    this.$axios
                        .post('/editUser', {
                            params: "searchbyUsername",
                            name:this.state
                        })
                        .then(successResponse => {
                            const str = successResponse.data;
                            this.searchResult(str);
                        })
                }
            },
            searchResult(str){
                this.tableData=[];
                let arr = new Array();
                arr=str.split(',');


                for(let i=0; i<arr.length-1; i++)
                {
                    let todoObj={
                        name: arr[i],
                        usernumber:arr[++i],
                        money: arr[++i],
                        like: arr[++i],
                        date:arr[++i],
                        reciever:arr[++i],
                        address: arr[++i],
                        phonenumber:arr[++i],
                        password:arr[++i],

                    };

                    this.tableData .push(todoObj);
                }
            },
            //获取用户信息
            getData(){
                this.$axios
                    .post('/editUser', {
                        params: "getUser"
                    })
                    .then(successResponse => {
                        // console.log(successResponse.data);
                        const str = successResponse.data;
                        let arr = new Array();
                        arr=str.split(',');
                        for(let i=0; i<arr.length; i++)
                        {
                            let todoObj={
                                name: arr[i],
                                usernumber:arr[++i],
                                money: arr[++i],
                                like: arr[++i],
                                date:arr[++i],
                                reciever:arr[++i],
                                address: arr[++i],
                                phonenumber:arr[++i],
                                password:arr[++i],


                            };
                            this.tableData .push(todoObj);
                        }
                        for(let i=0; i<arr.length; i=i+9)
                        {
                            this.restaurants.push({
                                value:arr[i],
                                usernumber:arr[i+1],

                            });
                        }

                    })
            },
            //编辑用户信息
            handleEdit(index, row) {

                this.idx = index;
                this.form = row;
                this.form.password="";
                this.editVisible = true;
                console.log("aaa"+this.editVisible);
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })

                    .then(() => {
                        console.log(row.name);
                        this.$axios
                            .post('/editUser', {
                                params: "del",
                                username:row.username
                            })
                            .then(successResponse => {
                                this.$message.success('删除成功');
                                this.tableData.splice(index, 1);
                            })

                    })
                    .catch(() => {});

            },
            saveEdit(){
                if(this.form.name==""||this.form.password==""||this.form.usernumber==""||this.form.reciever==""||this.form.phonenumber==""||this.form.address==""){
                    this.$message.warning("不可为空");
                }
                else{
                    this.$axios
                        .post('/editUser', {
                            params: "editUserInfo",
                            name:this.form.name,
                            password:this.form.password,
                            userphonenumber:this.form.usernumber,
                            reciever:this.form.reciever,
                            recieverphonenumber:this.form.phonenumber,
                            recieveraddress:this.form.address
                        })
                        .then(successResponse => {
                            console.log(successResponse);
                            if(successResponse.data=="editUserInfoOk"){
                                this.editVisible = false;
                                this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                                this.$set(this.tableData, this.idx, this.form);
                            }

                        })
                }

            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return this.restaurants;
            },
            handleSelect(item) {
                console.log(item);
            },
            handleIconClick(ev) {
                console.log(ev);
            }
        },
        mounted() {
            this.restaurants = this.loadAll();
        },

    }
</script>